<template>
  <div>
    <div class="x-full">
      <div class="x-card-content">
        <div class="x-full">
          <table class="rank-table">
            <thead>
              <tr>
                <th>运维类别</th>
                <th>数值</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span class="rank-icon">1</span> 养护</td>
                <td>100KM</td>
              </tr>
              <tr>
                <td><span class="rank-icon">2</span> 检测</td>
                <td>80KM</td>
              </tr>
              <tr>
                <td>
                  <span class="rank-icon">3</span>
                  维修（开挖）
                </td>
                <td>500KM</td>
              </tr>
              <tr>
                <td>
                  <span class="rank-icon">4</span>
                  维修（非开挖）
                </td>
                <td>1000个</td>
              </tr>
              <tr>
                <td><span class="rank-icon">5</span> 测绘</td>
                <td>90KM</td>
              </tr>
              <tr>
                <td><span class="rank-icon">6</span> 抢修</td>
                <td>3000处</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.x-full {
  width: 100%;
  height: 100%;
}
.x-card .x-card-content {
  height: calc(100% - 35px);
}
.rank-table {
  width: 100%;
  font-size: 13px;
  text-align: left;
}
table {
  border-collapse: collapse;
}
th {
  text-align: inherit;
}
.rank-table tbody tr:first-child .rank-icon {
  background: #ef4d45;
}
.rank-table .rank-icon {
  background: grey;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  display: inline-block;
  margin-right: 5px;
}
.rank-table th {
  padding: 10px 8px;
  font-size: 14px;
}
.rank-table td {
  padding: 9px 8px;
}
.rank-table tbody tr:nth-child(2) .rank-icon {
  background: #b06339;
}
.rank-table tbody tr:nth-child(3) .rank-icon {
  background: #187099;
}
</style>
